<template>
	<div class="songdetail">
		<!-- 头部 -->
		<div class="head">
			<span @click="goback"><van-icon name="arrow-left" />播放歌曲</span>
			<span><van-icon name="ellipsis" size="20" /></span>
		</div>
		<!-- 内容 -->
		<div
			class="detail"
			:style="{ background: 'url(' + songDetail.al.picUrl + ') ' }"
		>
			<div class="container">
				<h1 class="biaoti">{{ songDetail.name }}</h1>
				<div class="detail-play">
					<div class="teshutu">
						<img src="../../assets/needle.png" alt="" />
					</div>
					<img :class="{ an: !isShow }" :src="songDetail.al.picUrl" alt="" />
					<div class="bf" @click="isShow = !isShow">
						<van-icon @click="musicPlay" v-show="isShow" name="play-circle-o" />
						<van-icon
							@click="musicPause"
							v-show="!isShow"
							name="pause-circle-o"
						/>
					</div>
				</div>
				<audio
					:src="songUrl"
					class="media-audio"
					loop
					autoplay
					ref="MusicPlay"
				></audio>

				<!-- 歌词 -->
				<div class="lrcContainer">
					<div class="lrc" ref="lrc">
						<p
							class="lrc-p"
							:class="{
								active:
									currentTime > allKeys[index] &&
									currentTime < allKeys[index + 1],
							}"
							v-for="(item, key, index) in lrcData"
							:key="index"
						>
							<span>{{ item }}{{ scrollLRC(index) }}</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { loadMusicAPI, songLyric, songUrl } from "../../api/song";
export default {
	data() {
		return {
			isShow: false,
			songDetail: { al: {} },
			songUrl: {},

			lrcData: "",
			lyric: "",
			currentTime: 0,
			allKeys: [],
		};
	},
	computed: {},
	watch: {},

	methods: {
		//返回上一页
		goback() {
			this.$router.go(-1);
		},
		musicPause() {
			this.$refs.MusicPlay.pause();
			this.musicTF = true;
		},
		musicPlay() {
			this.$refs.MusicPlay.play();
			this.musicTF = false;
		},
		async showsong(id) {
			//    歌曲信息
			const result = await loadMusicAPI(id);
			console.log(result);
			if (result.status == 200) {
				console.log(result.data.songs[0]);
				this.songDetail = result.data.songs[0];
			}
			// 歌词
			const result1 = await songLyric(id);
			console.log(result1);
			if (result1.status == 200) {
				console.log(result1.data.lrc.lyric);
				this.lyric = result1.data.lrc.lyric;
				this.filterLRC(this.lyric);
			}
			//歌曲声音
			const result3 = await songUrl(id);
			console.log(result3);
			if (result3.status == 200) {
				console.log(result3.data.data[0].url);
				this.songUrl = result3.data.data[0].url;
			}
		},
		filterLRC(values) {
			if (!values) return;
			var lrc = {};
			var lyrics = values.split("\n");
			var reg = /\[\d*:\d*(\.|:)\d*]/g;
			for (var i = 0; i < lyrics.length; i++) {
				var timeRegArr = lyrics[i].match(reg);
				if (!timeRegArr) continue;
				var content = lyrics[i].replace(timeRegArr, "");
				var t = timeRegArr[0];
				var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
				var sec = parseInt(t.match(/:\d*/i).toString().slice(1));
				var time = min * 60 + sec;
				lrc[time] = content;
			}
			this.lrcData = lrc;
			this.getAllkeys(lrc);
			console.log(this.lrcData);
		},
		// 获取音乐播放时间
		// 1音乐总时长，音乐正在播放的时间
		addEventHandle() {
			this.$refs.MusicPlay.addEventListener("timeupdate", () => {
				// console.log(event, this.$refs.player.currentTime); //当前时间
				// console.log(this.$refs.player.duration);
				this.currentTime = this.$refs.MusicPlay.currentTime;
			});
		},
		//
		getAllkeys(lrcArr) {
			for (var key in lrcArr) {
				this.allKeys.push(key);
			}
			console.log(this.allKeys);
		},
		scrollLRC(index) {
			if (
				this.currentTime > this.allKeys[index] &&
				this.currentTime < this.allKeys[index + 1]
			) {
				this.$refs.lrc.style.top = -(30 * (index - 1)) + "px";
			}
		},
	},
	created() {
		const id = this.$route.params.id;
		this.showsong(id);
	},
	mounted() {
		this.addEventHandle();
	},
	components: {},
};
</script>
<style scoped>
.head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	background: #fff;
	padding: 0 10px;
	box-sizing: border-box;
}
/* 头部样式 */

/* 动画 */
@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}
.an {
	-webkit-transform: rotate(360deg);

	animation: rotation 3s linear infinite;

	-moz-animation: rotation 3s linear infinite;

	-webkit-animation: rotation 20s linear infinite;

	-o-animation: rotation 3s linear infinite;
}
/* 歌曲上面的小图 */
.teshutu {
	position: absolute;
	left: 40px;
	z-index: 30;
	top: 20px;
}
.biaoti {
	height: 33px;
	font-weight: normal;
	margin: 0;
	font-size: 20px;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #fff;
	position: relative;
}
.detail {
	background: url("../../assets/R-C.jpg");
	box-sizing: border-box;
}
.detail-play {
	width: 290px;
	height: 290px;
	background-image: url("../../assets/disc.png");
	background-size: cover;
	margin: 80px auto 0 auto;
	position: relative;
}
.detail-play img {
	height: 185px;
	width: 185px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
.detail-play .bf {
	width: 50px;
	height: 50px;
	font-size: 50px;
	color: white;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}
/* 歌词 */
.lrcContainer {
	text-align: center;
	width: 100%;
	overflow-y: scroll;
	position: relative;
	height:185px;
}
.lrc {
	width: 100%;
	position: absolute;
	top: 0;
}
.lrc-p {
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: #fff;
}
.active {
	color: red;
	font-size: 20px;
}
.up30 {
	margin-top: -30px;
}
</style>
